<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-IF标签使用</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>如果今天天气好，就出去玩，如果天气不好就在家学习</p>
    <p>v-if如果条件为真，元素就显示</p>
    <hr/>
    <p v-if="sun">今天天气好，可以出去玩</p>
    <p v-else>天气不好在家写作业</p>

    <hr/>
    {{age}}
    <p>年龄在0-18未成年 18-30青少年 30-60中年 60+老年</p>
    <p v-if="age<18">未成年</p>
    <p v-else-if="age>=18 && age<30">青少年</p>
    <p v-else-if="age>=30 && age<60">中年</p>
    <p v-else>老年</p>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            sun: true,
            age: 20
        }
    })
</script>
</body>
</html>